<template>

  <div class="register-page" style="padding: 0;">
    <div class="content" style="padding-top: 10px;padding-bottom: 1px;">
      <el-form :model="regForm" ref="regForm" label-position="left" label-width="0px">

        <div class="item">
          <p class="input-label"><span class="label">手机号码</span></p>
          <div class="input-box">
            <!--<el-tooltip :disabled="!errors.has('手机号码')" :content="errors.first('手机号码')" placement="right" :visible-arrow="false" :hide-after="0" effect="light" popper-class="err-tool-tip">
						</el-tooltip>-->
            <el-input v-model.trim="phone" maxlength="11" v-validate="'required|phone|max:11'" name="手机号码" placeholder="请输入手机号码"></el-input>
          </div>
          <div class="span-validate">
            <span v-show="errors.has('手机号码')" style="color: red;">{{ errors.first('手机号码') }}</span>
          </div>
        </div>
        <div class="item mcode-item">
          <p class="input-label"><span class="label">验证码</span></p>
          <div class="input-box">
            <!--<el-tooltip :disabled="!errors.has('验证码')" :content="errors.first('验证码')" placement="right" :visible-arrow="false" :hide-after="9000" effect="light" popper-class="err-tool-tip">
						</el-tooltip>-->
            <el-input v-model="regForm.verCode" maxlength="6" v-validate="'required|max:6'" name="验证码" placeholder="请输入验证码" autocompleted="off"></el-input>
            <div class="right-box">
              <div class="ver-code">
                <el-button v-show="showVerCodeBtn" @click="sendVercode" :disabled="disabledVerCode" type="primary" size="small" round>获取手机验证码</el-button>
                <!--<a class="btn">获取手机验证码</a>-->
                <a v-show="!showVerCodeBtn" class="btn" disabled="disabled">重新发送({{againTime}})秒</a>
              </div>
            </div>
          </div>
          <div class="span-vercode-validate">
            <span v-show="errors.has('验证码')" style="color: red;">{{ errors.first('验证码') }}</span>
          </div>
        </div>
        <div class="item">
          <p class="input-label"><span class="label">用户名</span></p>
          <div class="input-box">
            <!--<el-tooltip :disabled="!errors.has('用户名')" :content="errors.first('用户名')" placement="right" :visible-arrow="false" :hide-after="9000" effect="light" popper-class="err-tool-tip">
						</el-tooltip>-->
            <el-input v-model.trim="regForm.username" maxlength="21" v-validate="'required|max:20'" name="用户名" placeholder="请输入用户名"></el-input>
          </div>
          <div class="span-validate">
            <span v-show="errors.has('用户名')" style="color: red;">{{ errors.first('用户名') }}</span>
          </div>
        </div>

        <div class="item">
          <p class="input-label"><span class="label">密码</span></p>
          <div class="input-box">
            <!--<el-tooltip :disabled="!errors.has('密码')" :content="errors.first('密码')" placement="right" :visible-arrow="false" :hide-after="9000" effect="light" popper-class="err-tool-tip">
						</el-tooltip>-->
            <el-input v-model="regForm.password" maxlength="9" v-validate="'required|min:6|max:8|password'" name="密码" show-password placeholder="请输入密码" autocompleted="off"></el-input>
          </div>
          <div class="span-validate">
            <span v-show="errors.has('密码')" style="color: red;">{{ errors.first('密码') }}</span>
          </div>
        </div>
        <div class="item">
          <p class="input-label"><span class="label">确认密码</span></p>
          <div class="input-box">
            <!--<el-tooltip :disabled="!errors.has('确认密码')" :content="errors.first('确认密码')" placement="right" :visible-arrow="false" :hide-after="9000" effect="light" popper-class="err-tool-tip">
						</el-tooltip>-->
            <el-input v-model="confirmPassword" maxlength="9" v-validate="'required|min:6|max:8|password'" name="确认密码" show-password placeholder="请输入确认密码" autocompleted="off"></el-input>
          </div>
          <div class="span-validate">
            <span v-show="errors.has('确认密码')" style="color: red;">{{ errors.first('确认密码') }}</span>
          </div>
        </div>
        <!-- 协议 -->
        <div class="register-greement">
          <el-checkbox v-model="checkAgreement"></el-checkbox>
          <span class="grid-content bg-purple">我已阅读并同意
            <a @click="clickAgreement" class="link">《用户注册协议》</a>
          </span>
        </div>
        <!-- 按钮 -->
        <el-button @click="handleRegist" :disabled="btnDisabled" class="btn btn-primary agree-btn">注册</el-button>
      </el-form>
    </div>

    <!-- 添加 修改 -->
    <agreement v-if="showAgreement" :showAgreement="showAgreement" @myAgree="myAgree" @closeDialog="closeDialog" />

  </div>
</template>

<script>
  import {
    sendVercode,
    regist,
  } from '@/api/register'

  /* 工具 */
  import * as common from '@/utils/base/common'

  /* 组件 */
  import agreement from './agreement'

  export default {
    /* 注册 */
    name: 'register',
    data() {
      return {
        regForm: {
          phone: '',
          verCode: '', // 用户输入验证码
          username: '',
          password: '',
        },
        btnDisabled: true,
        showVerCodeBtn: true, // 显示发送按钮
        disabledVerCode: true, // 是否禁用
        againTime: 0, // 倒计时 计数器
        phone: '',
        confirmPassword: '', // 确认密码

        /* 协议 */
        showAgreement: false, // 是否显示协议
        checkAgreement: false, // 勾选协议
      }
    },
    watch: {
      phone() {
        this.vilPhone()
      },
      checkAgreement() {
        if(this.checkAgreement) {
          this.btnDisabled = false
        } else {
          this.btnDisabled = true
        }
      },
    },
    created() {
      this.initData()
    },
    components: {
      agreement,
    },
    methods: {
      initData() {},

      // 验证手机号是否正确
      vilPhone() {
        this.$validator.validate('手机号码').then((result) => {
          if(result) {
            this.disabledVerCode = false // 发送手机验证码按钮生效
            this.regForm.phone = this.phone
          } else {
            this.disabledVerCode = true
          }
        }).catch(err => {
          this.disabledVerCode = true
        })
      },

      /**
       * 发送验证码
       */
      sendVercode() {
        if(this.phone) {
          this.disabledVerCode = true
          let reqParam = {
            phone: this.phone
          }
          sendVercode(reqParam).then(response => {
            this.disabledVerCode = false // 发送手机验证码按钮生效

            if(response.code === 200) {
              common.message(this, 'success', 2, '发送成功!')
              this.showVerCodeBtn = false;
              //设置倒计时秒
              this.againTime = 60;
              var auth_timetimer = setInterval(() => {
                this.againTime--;
                if(this.againTime <= 0) {
                  this.showVerCodeBtn = true;
                  clearInterval(auth_timetimer);
                }
              }, 1000);
            }
            // 当前手机号已注册
            else if(response.code === 300112) {
              common.message(this, 'warning', 2, response.message || '发送验证码失败')
              this.disabledVerCode = true
            } else {
              common.message(this, 'warning', 2, response.message || '发送验证码失败')
            }
          }).catch(err => {
            // 防止连续多次请求
            this.avoidMultRequest2(this)
            common.message(this, 'error', 2, '发送验证码失败')
          })
        }
      },

      // 点击 保存按钮
      handleRegist() {
        this.$validator.validateAll().then((result) => {
          if(result) {
            if(this.confirmPassword === this.regForm.password) {
              this.$confirm('确认提交吗？').then(_ => {
                this.regist(result)
              }).catch(() => {});
            } else {
              common.message(this, 'warning', 2, '两次密码不匹配')
              // 防止连续多次请求
              this.avoidMultRequest(this)
            }
          }
        })
      },

      /**
       * 添加保存
       */
      regist(result) {
        // 按钮禁用
        this.btnDisabled = true;
        regist(this.regForm).then(response => {
          //解除按钮禁用状态
          this.btnDisabled = false;
          if(response.code === 200) {
            common.message(this, 'success', 2, '注册成功')
            this.toLogin()
          } else {
            // 防止连续多次请求
            this.avoidMultRequest(this)
            common.message(this, 'warning', 2, response.message || '注册失败')
          }

        }).catch(err => {
          // 防止连续多次请求
          this.avoidMultRequest(this)
          common.message(this, 'warning', 2, '注册失败')
        })

      },

      // 防止连续多次请求
      avoidMultRequest(that) {
        // 按钮禁用
        that.btnDisabled = true;
        // 三秒后在解除按钮禁用状态
        setTimeout(function() {
          //解除按钮禁用状态
          that.btnDisabled = false;
        }, 2000);
      },

      // 防止连续多次请求
      avoidMultRequest2(that) {
        // 按钮禁用
        that.disabledVerCode = true;
        // 三秒后在解除按钮禁用状态
        setTimeout(function() {
          //解除按钮禁用状态
          that.disabledVerCode = false;
        }, 2000);
      },

      // 跳转至登录页面
      toLogin() {
        this.$router.push({
          path: '/login'
        });
      },

      // 点击打开协议页面
      clickAgreement() {
        this.showAgreement = true
      },

      // 关闭弹出框
      closeDialog() {
        this.showAgreement = false
      },

      // 同意协议内容
      myAgree() {
        this.closeDialog()
        this.checkAgreement = true
      },

    } // methods end
  }
</script>

<style>
  .err-tool-tip {
    background: #FFFFFF !important;
    color: red !important;
    border-color: red !important;
    font-size: 12px;
    max-width: 400px;
  }
</style>
<style lang="scss" scoped>
  @import "~@/styles/register.css";
</style>